<template>
  <div class="container">
    <base-title base-title="角色列表"></base-title>
    <el-button type="success" round style="margin-bottom: 15px" @click="addRoleHandle">添加角色</el-button>
    <base-table :total="roleListTotal" :structure="roleListSc" :data="roleListData" btn-items="export" @current-page-change="handleCurrentPageChange">
      <template #operation="{ scope }">
        <el-button style="padding: 5px" type="success" :icon="Edit" text @click="editRoleName(scope.row.id)">编辑</el-button>
        <el-button style="padding: 5px" type="danger" :icon="Delete" text @click="deleteRole(scope.row.id)">删除</el-button>
      </template>
    </base-table>
    <role-dialog :roleForm="roleForm" ref="roleDialogRef" />
    <add-dialog ref="addRoleDialogRef" @onAddRole="handleAddRole" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onBeforeMount } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import { Delete, Edit } from '@element-plus/icons-vue'
  import { queryRoleListRequest, deleteRoleRequest } from '@/network/api/rights-api'
  import { roleListSc } from '@/components/base-table/config'
  import baseTable from '@/components/base-table/baseTable.vue'
  import RoleDialog from './child/RoleDialog.vue'
  import AddDialog from './child/AddDialog.vue'
  import notification from '@/utils/notification'
  import formatUtcTime from '@/utils/formatTime'
  let roleListData = ref<any[]>()
  const roleDialogRef = ref<any>()
  const addRoleDialogRef = ref<any>()
  const roleListTotal = ref<number>(0)
  const roleForm = reactive({
    id: 0,
    role_name: '',
  })

  const roleListInit = async (currentPage: number = 1) => {
    const result = await queryRoleListRequest(currentPage)
    roleListData.value = result.result.data
    roleListData.value!.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
    })
    roleListTotal.value = result.result.total
  }

  onBeforeMount(async () => {
    await roleListInit()
  })

  const editRoleName = (id: number) => {
    const currentRole = roleListData.value?.find((item: any) => item.id === id)
    roleForm.id = currentRole.id
    roleForm.role_name = currentRole.role_name
    roleDialogRef.value.roleVisibleController(true)
  }

  const deleteRole = async (id: number) => {
    const reslt = await ElMessageBox.confirm('确定删除吗？', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(err => err)
    if (reslt === 'cancel') {
      return notification.info('再想想~')
    } else if (reslt === 'confirm') {
      const result = await deleteRoleRequest(id)
      // 前端删除操作
      const index = roleListData.value!.findIndex(item => item.id === id)!
      roleListData.value!.splice(index, 1)
      notification.success(result.msg)
    }
  }

  const handleCurrentPageChange = async (currentPage: number) => {
    await roleListInit(currentPage)
  }

  const addRoleHandle = () => {
    addRoleDialogRef.value.addRoleVisibleController(true)
  }

  const handleAddRole = async (id: number) => {
    // 前端添加操作处理
    await roleListInit()
  }
</script>

<style scoped></style>
